<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      body{
        background: #666;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
      canvas{
        background: #fff;
        /* width: 1000px;
        height: 500px; */
      }
    </style>
</head>
<body>
    <!-- 
      坐标系解释

      方块, 设置颜色
      方框, 设置边框颜色
      橡皮擦
    -->
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        const oCanvas = document.getElementById('canvas')
        const ctx = oCanvas.getContext('2d'); //拿到画笔

        ctx.fillStyle = 'red'
        ctx.fillRect(
          100, 50,
          100, 100
        )

        ctx.strokeStyle = 'rgba(60, 250, 100, 1)'
        ctx.strokeRect(
          150, 100,
          100, 100
        )

        ctx.clearRect(
          150, 100,
          30, 30
        )

    </script>
</body>
</html>
